<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;font:12px "Microsoft YaHei",Arial,宋体;background:#fff;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:'';content:none;}
:focus {outline:0;}
table {border-collapse: collapse;border-spacing: 0;}
i,em{font-style:normal;}
img{border:0;vertical-align:middle;}
p{word-wrap:break-word;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{background:none;}


</style>
</head>

<body>
<div class="mian">
	<div class="cont">
    	<h1>个人博客登录</h1>
        <div class="cont_c"><form action="#" method="post">
        	<h2></h2>
        	<ul id="inputBox">
            	<li><dt>用户名</dt><dd class="userName"><input class="required" type="text" name="用户名" placeholder="用户名"></dd></li>
                <li><dt>密&nbsp;&nbsp;&nbsp;码</dt><dd class="passWord"><input class="required" type="text" name="密码" placeholder="密码"></dd></li>
                <li><dt>验证码</dt><dd class="YZM"><input class="required" name="验证码" type="text"><img src="images/YZM.png" alt="验证码"></dd></li>
                <li><input type="submit" value="登录"><a href="register">注册</a></li>
            </ul>
        </form></div>
    </div>
</div>
<script>
window.onload = function(){
	function resetValue(forms){
		for(var i=0;i<forms.elements.length;i++){
			var element = forms.elements[i];
			if(element.type == "submit") continue;
			if(!element.defaultValue) continue;
			element.onfocus = function(){
				if(this.value == this.defaultValue){
					this.value = "";
				}
			};
			element.onblur = function(){
				if(this.value == ""){
					this.value = this.defaultValue;
				}
			};
		}
	};
	function isFilled(field){
		if(field.value.length < 1 || field.value == field.defaultValue){
			return false;
		}else{
			return true;
		}
	}
	function validateForm(forms){
		for(var i=0;i<forms.elements.length;i++){
			var element = forms.elements[i];
			if(element.className.indexOf("required") != -1){
				if(!isFilled(element)){
					alert("请输入："+element.name);
					return false;
				}
			}
		}
		return true;
	};
	function getforms(){
		for(i=0;i<document.forms.length;i++){
			var thisform = document.forms[i];
			resetValue(thisform);
			thisform.onsubmit = function(){
				return validateForm(this);
			};
		}
	};
	getforms();
};
</script>
</body>
</html>
